Beispiel Style ändern

Ansicht ändern

Source

<!DOCTYPE html>
<html>
<head>
<meta charSet='utf-8'/>
<title>Style & JS</title>
 <script>
   function wechsel(wert)
   {
      console.log(wert);
      document.getElementById("darstellung").href = wert;     
   }
 </script>
 
  <link rel="stylesheet" id="darstellung"  href="basis.css" />
  </head>
  <body>
  <h1>Beispiel Style ändern</h1>
  <div>
  <h2>Ansicht ändern</h2>
     <button onclick="wechsel(value);" value="basis.css">Standard</button><br><br>
     <button onclick="wechsel(value);" value="rev.css">Negativ</button><br;><br;>
     <button onclick="wechsel(value);" value="bw.css">Schwarz - Weiss</button><br><br>
     <button onclick="wechsel(value);" value="wb.css">Weiss - Schwarz</button><br><br>
</div>

</body>
</html>

CSS Files mit Styles

basis.css

div {background-color: #44FF44;}
h2 {color:black;}
h2.inDiv {color:black;}
html {background-color: #bbFFbb;color:black;}
h1 {color: black;}

rev.css

div {background-color: #bbFFbb;}
h2 {color:black;}
h2.inDiv {color:black;}
html {background-color: #44FF44;color:black;}
h1 {color: black;}

bw.css

div {background-color: white;}
h2 {color:white;}
h2.inDiv {color:black;}
html {background-color: #44FF44;color:white;}
h1 {color: white;}

wb.css

div {background-color: black;}
h2 {color:black;}
h2.inDiv {color: white;}
html {background-color: white;color: black;}
h1 {color: black;}

@Bearbeiten@